<template>
    <div class="container" @click="handleback">
        <div class="wrapper">
           <swiper :options="swiperOption" class="swiper-container" >
              <swiper-slide v-for="(item , index) of imgs" :key="index">
                <img class="gallary-img" 
                     :src="item" >
              </swiper-slide>
              <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>   
        </div>
    </div>
</template>

<script>
export default {
  name: 'commonGallary',
  props:{
    imgs:{
      type:Array,
      default(){
        return []
        
      }
    }
  },
  data() {
    return {
      swiperOption:{
        pagination:'.swiper-pagination',
        paginationType:'fraction',
        //解决 当画廊组件开始隐藏再显示时 出现的swiper渲染问题
        observer:true,
        observeParents:true
      },
    }
  },
  methods:{
    handleback(){
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
  .container>>>.swiper-container{
    overflow: inherit;
  }
  .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 99;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000;
  }
  .wrapper{
    background: #fff;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
  }
  .gallary-img{
    width: 100%;
  }
  .swiper-pagination{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 2.4rem;
    color:#fff;
    
  }
</style>